<template>
	<view class="uni-container">
		<view class="headerBody">
			<view class="title">我的订单</view>
			<uni-search-bar @confirm="search" @input="input" @cancel="cancel" />
		</view>
		<scroll-view class="mainBody" scroll-y="true">
			<view class="cardBody" v-for="(item,index) in  list" :key="index">
				<view class="header">{{item.name}}
					<text :class="item.status=='制作中'?'orange':'green'">{{item.status}}</text></view>
				<scroll-view scroll-x="true" class="center">
					<view v-for="(item2,index2) in item.children" :key="index2" class="viewImage">
						<image :src="item2.url" />
						<view class="number">×{{item2.number}}</view>
						<view class="views">{{item2.name}}</view>
					</view>
				</scroll-view>
				<view class="footer">
					<text :class="item.valueStatus=='待付款'?'red':'green'">{{item.valueStatus}}</text>
					<view class="textNumber">
						<view >￥{{item.value}}</view>
						<view class="number">共 {{item.number}} 件</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '开封万达店',
					status: '制作中',
					valueStatus: '待付款',
					value: 120,
					number: 5,
					children: [{
							name: '红烧牛肉',
							number: 2,
							url: 'http://localhost:8080/static/lbt1.png'
						},
						{
							name: '饮料',
							number: 1,
							url: 'http://localhost:8080/static/lbt3.png'
						},
						{
							name: '汉堡',
							number: 1,
							url: 'http://localhost:8080/static/lbt3.png'
						},
						{
							name: '汉堡',
							number: 1,
							url: 'http://localhost:8080/static/lbt3.png'
						}
					]
				}]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.headerBody {
		height: 200rpx;
		background: #fff;

		.title {
			font-size: 16px;
			font-weight: 500;
			text-align: center;
			line-height: 80rpx;
			// font-family: "Source Han Sans";
		}

	}

	.mainBody {
		height: calc(100vh - 340rpx);
		width: calc(100% - 40rpx);
		padding: 20rpx 20rpx;

		.orange {
			color: #FF922C;
		}

		.green {
			color: #00B578;
		}
		.red{
			color: #EC3636;
		}

		.cardBody {
			height: 350rpx;
			width: 100%;
			background: #fff;
			border-radius: 20rpx;

			.header {
				height: 60rpx;
				padding: 0 20rpx;
				width: calc(100% - 40rpx);
				color: #333333;
				font-size: 14px;
				font-weight: 500;

				text {
					float: right;
				}
			}

			.center {
				height: 200rpx;
				width: 100%;
				white-space: nowrap;
				// display: flex;
				// ::v-deep.uni-scroll-view-content{

				// }
				.viewImage {
					height: 180rpx;
					width: 180rpx;
					margin: 0 20rpx;
					display: inline-block;

					image {
						width: 100%;
						height: 140rpx;
						border-radius: 15rpx;
					}

					.number {
						position: relative;
						background: rgba(51, 51, 51, 0.4);
						height: 40rpx;
						width: 40rpx;
						border-radius: 20rpx;
						font-size: 10px;
						font-weight: 500;
						line-height: 40rpx;
						color: #fff;
						text-align: center;
						top: -60rpx
					}

					.views {
						height: 40rpx;
						text-align: center;
						// line-height: 40rpx;
						color: #999;
						font-size: 12px;
						font-weight: 500;
						margin-top: -50rpx;
					}
				}
			}

			.footer {
				height: 80rpx;
				padding: 20rpx;
				width: calc(100% - 40rpx);
				.textNumber{
					float: right;
					width: 100rpx;
					text-align: center;
					margin-top: -20rpx;
					.number{
						font-size: 12px;
						font-weight: 350;
						color: #666666;
					}
				}
			}
		}
	}
</style>
